<!--  -->
<template>
  <div id="bg">
    <div id="relation-chart" style="width: 750px; height: 750px"></div>
    <div id="description">
      <div id="description-title">文人绘影</div>
      <div id="description-content">
        &nbsp;&nbsp;在金陵这片繁华之地，文化与历史交织，诞生了一个独具魅力的文人世界。自古以来，这片土地孕育了众多文人雅士，他们以追求艺术的高尚理念和卓越的创作天赋，为金陵注入了浓郁的文化底蕴。漫步于金陵的古街巷弄，仿佛能感受到历代文人的灵感涌动和创作激情。让我们穿越时空，领略金陵历史上众多文人的卓越才情和独特创作风格，感受他们留下的独特艺术魅力。让我们一同沉浸于这个灿烂绚丽的文人世界，感悟金陵文化的古往今来。
      </div>
    </div>
    <div id="sprite">
      <div id="sprite-chart-title">人物朝代分布统计</div>
      <div id="sprite-chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },

  mounted() {
    var that = this;
    d3.text("assets/base64.txt").then(function (data) {
      console.log(data);
      // 在此处处理读取到的文本数据
      that.spirit = data;
    });
    this.drawRelationChart();
    setTimeout(() => {
      this.drawSpriteChart();
    }, 500);
  },

  methods: {
    drawRelationChart() {
      d3.json("datasets/persons.json").then(function (graph) {
        var chartDom = document.getElementById("relation-chart");
        var myChart = echarts.init(chartDom, null, {
          renderer: "svg",
        });
        var option;
        myChart.showLoading();
        myChart.hideLoading();
        graph.nodes.forEach(function (node) {
          node.label = {
            show: node.symbolSize > 0,
          };
        });
        option = {
          color: [
            "#9EB6C8",
            "#9EA6B0",
            "#9EA6B3",
            "#B39696",
            "#CDBAA7",
            "#DBC7A7",
            "#B5BFB6",
            "#AED0D2",
            "#AEB6BF",
            "#AEB6C2",
            "#C5A5A5",
          ],
          //   title: {
          //     text: "Les Miserables",
          //     subtext: "Circular layout",
          //     top: "bottom",
          //     left: "right",
          //   },
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function (a) {
                return a.name;
              }),
            },
          ],
          animationDurationUpdate: 1500,
          animationEasingUpdate: "quinticInOut",
          series: [
            {
              name: "作品数量",
              type: "graph",
              layout: "circular",
              circular: {
                rotateLabel: true,
              },
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                position: "right",
                formatter: "{b}",
              },
              lineStyle: {
                color: "source",
                curveness: 0.3,
                opacity: 0.15,
                width: 30, // 设置线的粗细
              },
            },
          ],
        };
        myChart.setOption(option);
        option && myChart.setOption(option);
      });
    },
    drawSpriteChart() {
      var chartDom = document.getElementById("sprite-chart");
      var myChart = echarts.init(chartDom);
      var option;
      var data = [3, 1, 15, 81, 48, 9, 46, 12, 109, 138, 74];
      var spirit = this.spirit;
      var maxData = 150;
      option = {
        tooltip: {},
        xAxis: {
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
          axisLabel: {
            margin: 10,
          },
        },
        yAxis: {
          data: [
            "东吴",
            "西晋",
            "东晋",
            "南朝",
            "唐",
            "南唐",
            "宋",
            "元",
            "明",
            "清",
            "现当代",
          ],
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            margin: 10,
            color: "#999",
            fontSize: 16,
          },
        },
        grid: {
          top: "center",
          height: 300,
          left: 70,
          right: 100,
        },
        series: [
          {
            // current data
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: [3, 1, 15, 81, 48, 9, 46, 12, 109, 138, 74],
            markLine: {
              symbol: "none",
              label: {
                formatter: "max: {c}",
                position: "start",
              },
              lineStyle: {
                color: "green",
                type: "dotted",
                opacity: 0.2,
                width: 2,
              },
              data: [
                {
                  type: "max",
                },
              ],
            },
            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              opacity: 0.2,
            },
            label: {
              show: true,
              formatter: function (params) {
                return ((params.value / maxData) * 100).toFixed(1) + " %";
              },
              position: "right",
              offset: [10, 0],
              color: "steelblue",
              fontSize: 18,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: [3, 1, 15, 81, 48, 9, 46, 12, 109, 138, 74],
            z: 5,
          },
        ],
      };
      var index = 1;
      var interval = setInterval(function () {
        myChart.setOption({
          series: [
            {
              data: data.slice(0, index),
            },
            {
              data: data.slice(0, index),
            },
          ],
        });
        index++;
        if (index == 12) {
          // 在适当的时机关闭定时器
          clearInterval(interval);
        }
      }, 500);
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
#bg {
  background-image: url("@/assets/背景图2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1500px;
  height: 750px;
}
#description {
  width: 500px;
  height: 500px;
  position: absolute;
  right: 125px;
  top: 50px;
}

#description-title {
  position: absolute;
  left: 35%;
  font-family: "华文行楷", "STXingkai", serif;
  font-size: 30px;
}

#description-content {
  position: absolute;
  left: 0%;
  top: 10%;
  font-family: Lobster, cursive;
  font-size: 18px;
}

#sprite {
  width: 500px;
  height: 500px;
  position: absolute;
  right: 125px;
  bottom: 0;
}

#sprite-chart {
  width: 500px;
  height: 550px;
}
#sprite-chart-title {
  position: absolute;
  left: 25%;
  top: 10%;
  font-family: "华文行楷", "STXingkai", serif;
  font-size: 30px;
}
</style>
